<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QQ音乐首页</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Microsoft YaHei", Arial, sans-serif;
        background-color: #f5f5f5; 
        color: #333;
        line-height: 1.6;
      }

      .top-nav {
        height: 60px; 
        display: flex;
        align-items: center;
        padding: 0 20px;
        position: relative;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        width: 100vw; 
        margin-left: calc(-20px);
        margin-right: calc(-20px);
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
      }

      main {
        margin-left: 20px;
        margin-right: 20px; 
      }

      h1 {
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin: 20px 0 10px 0; 
        padding: 0;
        border: none;
        letter-spacing: 10px;
      }

      .section-songlist {
        margin-bottom: 30px; 
        background: linear-gradient(to top, white, #f5f5f5);
        width: 100vw;
        margin-left: calc(-20px);
        margin-right: calc(-20px);
        padding-left: 20px; 
        padding-right: 20px; 
        box-sizing: border-box;
      }

      .tag-list {
        text-align: center;
        padding: 20px 0;
        background: none;
        border-bottom: none;
        box-shadow: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }

      .tag-item {
        display: inline-block;
        padding: 8px 16px;
        margin: 0 5px;
        text-decoration: none;
        color: #333;
        background: none;
        border: none;
        border-radius: 0;
        font-size: 14px;
        font-weight: normal; 
        font-family: inherit;
        transition: all 0.3s ease;
      }

      .tag-item.tag-active {
        color: #31c27c;
        background: none;
        border: none;
        font-weight: normal;
      }

      .tag-item:hover {
        color: #31c27c;
        background: none;
        border: none;
        font-weight: normal;
      }

      .playlist {
        padding: 20px;
        text-align: center;
        background: none;
      }

      .album {
        display: inline-block;
        vertical-align: top;
        margin: 0 10px 30px;
        width: 164px;
        box-shadow: none;
      }

      .cover-wrap {
        position: relative;
        display: inline-block;
        width: 164px;
        height: 164px;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: none;
      }

      .cover-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .cover-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s;
      }

      .cover-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        opacity: 0;
        transition: opacity 0.3s;
      }

      .cover-wrap:hover .cover-mask,
      .cover-wrap:hover .cover-play {
        opacity: 1;
      }

      .nowrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 164px;
        margin: 0 auto;
        text-align: left;
      }

      .album-title,
      .album-author,
      .album-time {
        margin-top: 8px;
        text-decoration: none;
      }

      .album-title {
        color: #333;
        font-weight: bold;
        font-size: 14px;
      }

      .album-title:hover {
        color: #31c27c;
      }

      .album-author {
        color: #666;
        font-size: 13px;
      }

      .album-author:hover {
        color: #31c27c;
      }

      .album-time {
        color: #999;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .mv_list__listen_icon {
        display: inline-block;
        width: 12px;
        height: 12px;
        background: url('data:image/svg+xml;utf8,<svg t="1760496846038" class="icon" viewBox="0 0 1326 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M662.588235 0C178.959059 0 180.705882 440.018824 180.705882 440.018824l0 230.881882c0 0-29.876706-10.420706-58.669176-10.420706C0 660.48 0 723.968 0 723.968l0 227.026824C0 950.994824 16.685176 1024 122.036706 1024s119.145412-73.005176 119.145412-73.005176L241.182118 439.898353c0 0-20.299294-372.434824 421.406118-372.434824 441.705412 0 422.610824 372.434824 422.610824 372.434824l0 511.096471c0 0 0 73.005176 119.988706 73.005176C1315.599059 1024 1325.176471 950.994824 1325.176471 950.994824l0-227.026824c0 0 0-65.475765-119.988706-65.475765-33.611294 0-60.717176 10.420706-60.717176 10.420706L1144.470588 440.018824C1144.470588 440.018824 1146.217412 0 662.588235 0zM301.176471 695.416471l0 295.695059C301.176471 991.171765 301.176471 1024 331.294118 1024 361.411765 1024 361.411765 991.171765 361.411765 991.171765l0-295.695059C361.411765 695.416471 361.411765 662.588235 331.294118 662.588235 301.176471 662.588235 301.176471 695.416471 301.176471 695.416471zM963.764706 695.416471l0 295.695059c0 0 0 32.828235 30.117647 32.828235 30.117647 0 30.117647-32.828235 30.117647-32.828235l0-295.695059c0 0 0-32.828235-30.117647-32.828235C963.764706 662.588235 963.764706 695.416471 963.764706 695.416471z" fill="%23999"></path></svg>') no-repeat center;
        background-size: contain;
        vertical-align: middle;
      }

      .section-new {
        margin-bottom: 30px;
        background: linear-gradient(to top, white, #f5f5f5);
        width: 100vw;
        margin-left: calc(-20px); 
        margin-right: calc(-20px);
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
      }

      .mod_btn__icon_play {
        background-color: transparent;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto; 
        height: 32px;
        min-width: 80px;
        padding: 0 12px;
        cursor: pointer;
        margin-right: 10px;
      }

      .play-icon {
        width: 16px;
        height: 16px;
        clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
        background-color: #333; 
        margin-right: 6px;
      }

      .play-all-text {
        font-size: 14px;
        font-weight: normal;
        font-family: inherit;
        color: #333; 
        text-decoration: none; 
      }

      .mod_btn__icon_play:hover .play-all-text {
        color: #31c27c;
      }

      .section-mv {
        margin-bottom: 30px;
        background: linear-gradient(to top, white, #f5f5f5);
        width: 100vw;
        margin-left: calc(-20px);
        margin-right: calc(-20px); 
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
      }

      .section-mv .album {
        width: 244px;
        height: 231.66px; 
        margin: 0 20px 25px 0;
        display: inline-block;
        vertical-align: top;
        box-sizing: border-box;
      }

      .section-mv .cover-wrap {
        width: 224px; 
        height: 126px; 
        margin: 0 auto;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
      }

      .section-mv .cover-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .section-mv .cover-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s;
      }

      .section-mv .cover-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        opacity: 0;
        transition: opacity 0.3s;
      }

      .section-mv .cover-wrap:hover .cover-mask,
      .section-mv .cover-wrap:hover .cover-play {
        opacity: 1;
      }

      .section-mv .album-title,
      .section-mv .album-author,
      .section-mv .album-time {
        margin-top: 8px;
        text-align: left;
        width: 224px;
        margin-left: 0;
        margin-right: auto;
        max-width: 224px;
      }

      .section-mv .album > div {
        text-align: left !important;
        width: 224px; 
        margin: 0 auto;
      }

      footer {
        background-color: #f5f5f5;
        height: 70px;
        box-shadow: none;
        width: 100vw; 
        margin-left: calc(-20px);
        margin-right: calc(-20px);
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
      }

      .section-new .playlist {
        text-align: center;
        padding: 20px;
      }

      .section-new .album {
        width: 380px; 
        height: 86px;
        margin: 0 0 20px 0;
        display: inline-block;
        vertical-align: top;
      }

      .section-new .cover-wrap {
        float: left;
        width: 86px;
        height: 86px;
        margin-right: 15px;
      }

      .section-new .cover-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .section-new .cover-play {
        width: 30px;
        height: 30px;
      }

      .info-container {
        float: left; 
        width: calc(380px - 86px - 15px - 60px);
        height: 86px;
        display: flex;
        flex-direction: column;
        justify-content: center; 
        position: relative;
      }

      .section-new .nowrap {
        max-width: none;
        margin: 0;
        text-align: left;
        width: 100%;
      }

      .section-new .album-title {
        font-size: 14px;
        margin-bottom: 4px;
      }

      .section-new .album-author {
        font-size: 13px;
        margin-bottom: 4px;
      }

      .section-new .album-time {
        font-size: 12px;
        position: absolute;
        right: -60px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        width: 60px;
        text-align: right;
      }

      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }

      .new-song-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
        max-width: calc(3 * 380px + 2 * 20px);
        margin: 0 auto;
      }

      .section-songlist .album > div {
        text-align: left;
        width: 164px;
        margin: 0 auto;
      }

      .section-songlist .nowrap {
        text-align: left;
        width: 164px;
        margin: 0 auto;
      }

      footer {
        background-color: #333;
        height: 70px;
        box-shadow: none;
        width: 100vw; 
        margin-left: calc(-20px);
        margin-right: calc(-20px);
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div class="top-nav">
      <img src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000" alt="">
    </div>

    <main>
      <div class="section-songlist">
        <h1>歌 单 推 荐</h1>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">为你推荐</a>
          <a href="#" class="tag-item">运动</a>
          <a href="#" class="tag-item">网络歌曲</a>
          <a href="#" class="tag-item">思恋</a>
          <a href="#" class="tag-item">官方歌单</a>
          <a href="#" class="tag-item">情感</a>
        </div>
        <div class="playlist">
          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="歌单封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="歌单封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="歌单封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="歌单封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="歌单封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
          </div>
        </div>
      </div>

      <div class="section-new">
        <h1>新 歌 首 发</h1>
        <div class="tag-list">
          <div class="mod_btn__icon_play">
            <div class="play-icon"></div>
            <div class="play-all-text">播放全部</div>
          </div>
          <a href="#" class="tag-item tag-active">最新</a>
          <a href="#" class="tag-item">内地</a>
          <a href="#" class="tag-item">港台</a>
          <a href="#" class="tag-item">欧美</a>
          <a href="#" class="tag-item">韩国</a>
          <a href="#" class="tag-item">日本</a>
        </div>
        <div class="playlist">
          <div class="new-song-grid">
            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>

            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>

            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>

            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>

            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>

            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>

            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>

            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>

            <div class="album">
              <a href="#" class="cover-wrap">
                <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
                <div class="cover-mask"></div>
                <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
              </a>
              <div class="info-container">
                <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
                <a href="#" class="nowrap album-author">阿云嘎</a>
                <div class="nowrap album-time">3:00</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="section-mv">
        <h1>M V</h1>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">精选</a>
          <a href="#" class="tag-item">内地</a>
          <a href="#" class="tag-item">韩国</a>
          <a href="#" class="tag-item">港台</a>
          <a href="#" class="tag-item">欧美</a>
          <a href="#" class="tag-item">日本</a>
        </div>
        <div class="playlist">
          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>

          <div class="album">
            <a href="#" class="cover-wrap">
              <img src="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hNAwr4dbutH_1.jpg" class="cover-img" alt="专辑封面" />
              <div class="cover-mask"></div>
              <img src="https://y.qq.com/ryqq/static/media/cover_play@2x.53a26efb.png?max_age=2592000" class="cover-play" alt="播放图标" />
            </a>
            <div>
              <a href="#" class="nowrap album-title">向宿命挥拳的人</a>
            </div>
            <div>
              <a href="#" class="nowrap album-author">阿云嘎</a>
            </div>
            <div class="nowrap album-time"><span class="mv_list__listen_icon"></span>9815</div>
          </div>
        </div>
      </div>
    </main>
    <footer></footer>
  </body>
</html>









